import React, { useEffect, useState } from 'react'

import { loadFriendSite } from '@/apis/friend'
import type { FriendSite } from '@/types/friend'

export default function Footer() {
  const [sites, setSites] = useState<FriendSite[]>([])
  useEffect(() => {
    loadFriendSite()
      .then((data) => {
        setSites(data.items)
      })
      .catch((error) => {
        console.error('Failed to load friend sites:', error)
      })
  }, [])

  return (
    <div className="fixed bottom-0 left-0 z-10 w-full bg-white py-2 text-center shadow">
      <span className="mr-2 font-semibold"></span>
      {sites.length === 0 ? (
        <span className="text-sm text-gray-400"></span>
      ) : (
        sites
          .filter((site) => site.status === 1)
          .map((site) => (
            <a
              key={site.id}
              href={site.site}
              // target="_blank"
              rel="noopener noreferrer"
              className="mx-2 text-sm text-gray-600 hover:underline"
            >
              {site.name}
            </a>
          ))
      )}
    </div>
  )
}
